<template>
	<view class="center p-x-20">
		<view class="">
			<view v-if="orderInfo" class=" p-x-20 p-y-20 radius-20 bs-bx po-r" style="background-color: #fff;">
				<view class="flex-a">
					<uv-icon name="map" size="18"></uv-icon>
					<text class="m-l-10 size-28">城市:</text>
					<text class="m-l-10 size-28 bold" style="color: #122f84;" @click="copy(orderInfo.newOrderContent.cityName)">{{orderInfo.newOrderContent.cityName}}</text>
					
					<!-- <view @click="copy(orderInfo.storeName)" class="size-22 p-x-15 p-y-3 m-l-10 radius-5" style="background-color: #d1d1d15e;">
						复制
					</view> -->
				</view>
				<view class="flex-a m-t-10">
					<uv-icon name="home" size="18"></uv-icon>
					<text class="m-l-10 size-28">门店:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;" @click="copy(orderInfo.storeName)">{{orderInfo.storeName}}</text>
					<!-- <uv-button @click="copy(orderInfo.storeName)" text="复制" size="mini" style="margin-left: 10rpx;"></uv-button> -->
				</view>
				<view class="flex-a m-t-10">
					<uv-icon name="empty-order" size="18"></uv-icon>
					<text class="m-l-10 size-28">店铺ID:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;" @click="copy(orderInfo.storeCode)">{{orderInfo.storeCode}}</text>
					
				</view>
				<!-- <view class="flex-a m-t-10">
					<uv-icon name="phone" size="18"></uv-icon>
					<text class="m-l-10 size-28">用户手机号:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;"></text>
					<uv-button @click="copy" text="复制" size="mini" style="margin-left: 10rpx;"></uv-button>
				</view> -->
				<view class="flex-a m-t-10">
					<uv-icon name="file-text" size="18"></uv-icon>
					<text class="m-l-10 size-28">订单号:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;"  @click="copy(orderInfo.id)">{{orderInfo.id}}</text>
					
				</view>
				<view v-if="currentStatus == 1" class="po-a p-x-40 p-y-10 white bold" style="top: 0%;right: 0%;background-color: #bf2121;border-radius: 0 20rpx 0 20rpx;">
					待结算
				</view>
				<view  v-if="currentStatus == 2" class="po-a p-x-40 p-y-10 white bold" style="top: 0%;right: 0%;background-color: #bf2121;border-radius: 0 20rpx 0 20rpx;">
					已完成
				</view>
				<view  v-if="currentStatus == 3" class="po-a p-x-40 p-y-10 white bold" style="top: 0%;right: 0%;background-color: #bf2121;border-radius: 0 20rpx 0 20rpx;">
					已关闭
				</view>
				<view  v-if="currentStatus == 5" class="po-a p-x-40 p-y-10 white bold" style="top: 0%;right: 0%;background-color: #bf2121;border-radius: 0 20rpx 0 20rpx;">
					已过期
				</view>
			</view>
			<view v-if="orderInfo" class=" p-x-20 p-y-20 radius-20 bs-bx po-r m-t-20" style="background-color: #fff;">
				<view class="flex-b" v-if="orderInfo.platform==3">
					<view class="flex">
						<view class="">
							<image class="w-100 h-100" :src="orderInfo.productImg" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3" style="flex-wrap: wrap;">
							<view class="size-28 flex">
								<text>{{orderInfo.newOrderContent.productName}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view class="size-25">
								{{JSON.parse(orderInfo.newOrderContent.orderContent).packets[0].products[0].strValue}}
							</view>
						</view>
					</view>
					<view class="">
						×1
					</view>
				</view>
				<view class="flex-b" v-else-if="orderInfo.platform==4">
					<view class="flex">
						<view class="">
							<image class="w-100 h-100" :src="orderInfo.image" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3" style="flex-wrap: wrap;">
							<view class="size-28 flex">
								<text>{{orderInfo.productName}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view style="padding: 10rpx;background-color: #fff;">
								<uv-read-more show-height="40rpx" textIndent="0em" :toggle="true" :shadowStyle="shadowStyle" closeText="展开" color="#8e6236">
								<view v-for="item in orderInfo.newOrderContent.packets[0].products" style="font-size: 25rpx;color: #000;">
									<view class="" v-for="item1 in generateString(item)">
										{{item1}}
									</view>
								</view>
								</uv-read-more>
							</view>
							<view class="size-25 color-gray m-t-10" style="word-wrap:break-word;word-break:break-all;">{{orderList.packets[0].products[0].strValue}}</view>
						</view>
					</view>
					<view class="">
						×1
					</view>
				</view>
				<view class="flex-b" v-else-if="orderInfo.platform==6">
					<view class="flex">
						<view class="">
							<image class="w-100 h-100" :src="orderInfo.image" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3">
							<view class="size-28 flex">
								<text>{{orderInfo.newOrderContent.packets[0].products[0].name}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view style="padding: 10rpx;background-color: #fff;">
								<uv-read-more show-height="40rpx" textIndent="0em" :toggle="true" :shadowStyle="shadowStyle" closeText="展开" color="black">
								<view v-for="item in orderInfo.newOrderContent.packets[0].products" style="font-size: 25rpx;color: #000;">
									<view v-if="item.option_list">
										<view v-for="item1 in dksGenerateString(item)">
											{{item1}}
										</view>
									</view>
									<view v-else>
										<view v-for="item4 in item2.coupon_list[0].condiment_list">
											{{item4.name}}
										</view>
									</view>
								</view>
								</uv-read-more>
							</view>
						</view>
					</view>
					<view class="">
						×1
					</view>
				</view>
				<view class="flex-b" v-else-if="orderInfo.platform==2">
					<view class="flex">
						<view class="">
							<image class="w-100 h-100" :src="orderInfo.image" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3">
							<view class="size-28 flex">
								<text>{{orderInfo.newOrderContent.packets[0].products[0].showNameCn}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view style="padding: 10rpx;background-color: #fff;">
								<uv-read-more show-height="40rpx" textIndent="0em" :toggle="true" :shadowStyle="shadowStyle" closeText="展开" color="#8e6236">
								<view v-for="item in orderInfo.newOrderContent.packets[0].products" style="font-size: 25rpx;color: #000;">
									<view class="" v-for="item1 in kdjGenerateString(item)">
										{{item1}}
									</view>
								</view>
								</uv-read-more>
							</view>
						</view>
					</view>
					<view class="">
						×1
					</view>
				</view>
				<view class="text-r" v-if="orderInfo">
				 <text class="bold size-28">到手价：</text> <text class="bold size-20">￥</text><text class="bold" style="color: red;">{{orderInfo.realTotalAmount}}</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRefs,
		onMounted,
		nextTick
	} from "vue";
	import {
		onLoad,
		onReachBottom,
		onShow,
		onLaunch,
		onReady,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {generateString,dksGenerateString,kdjGenerateString} from '@/utils/shopStr.js'
	import {grabInfo} from '@/api/index.js'
	import {unloadEwm,queryConfiguration} from '@/api/grab/grab.js'
	import {dataGong,sortJsonKeys,sortAndFormatParams,combine} from '@/utils/encryption.js'
	let orderId = ref()
	let orderInfo = ref()
	let orderList = ref()
	let mealCode = ref()
	let ewmValue = ref()
	let platform = ref()
	let selectValue = ref()
	let upLoadValue = ref([])
	// 上页状态
	let currentStatus = ref()
	let merchantId = ref()
	const shadowStyle = ()=>{
		return {
			// #ifndef APP-NVUE
			backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
			// #endif
			// #ifdef APP-NVUE
			// nvue上不支持设置复杂的backgroundImage属性
			backgroundImage: "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
			// #endif
			paddingTop: "100px",
			marginTop: "-100px",
		}
	}
	onLoad((value)=>{
		if(value.id){
			orderId.value = value.id
			currentStatus.value = value.currentStatus
			merchantId.value = value.merchantId
			getGrabInfo()
		}
	})
	const getGrabInfo = ()=>{
		let cityJinWei = {
			id:orderId.value,
			merchantId:merchantId.value,
			status:2,
			...dataGong()
		}
		let cenShi = sortAndFormatParams(cityJinWei) //请求序列化并变成字符串
		let combineTrue = combine(cenShi, cityJinWei.timestamp)
		grabInfo(cityJinWei,combineTrue).then(res=>{
			if(res.data){
				platform.value = res.data.platform
				if(res.data.newOrderContent){
					orderInfo.value = res.data
					orderList.value = orderInfo.value.newOrderContent
				}
				// getQueryConfiguration()
			}
		})
	}
	const copy = (value)=>{
		// console.log(value);
		uni.setClipboardData({
			data: value,
			success: function () {
				uni.showToast({
					title: '复制成功',
					icon: "none",
				})
			}
		});
	}
	
</script>

<style lang="scss" scoped>
	.center {
		padding-bottom: 150rpx !important;
	}
</style>
